
import React, { Component, Fragment } from 'react';
import imgURL from './pics/scan.png'
import imgURL1 from './pics/other.png'
import imgURL2 from './pics/zhifubao-icon.png'
import imgURL3 from './pics/dingding-icon.jpg'
import aa from './扫码登录二维码.png';
import bb from './密码登录.png';
import './ZJX.css';
import './loginRight.css'
import saoma from './img/扫码登录.png'

import './login.css';

class B1 extends React.Component{
    tab1 = () => {
        document.getElementById("tab-left").setAttribute("class", "tab-left-on");
        document.getElementById("tab-right").setAttribute("class", "tab-right");
        document.getElementById("login-right").style.display = "none";
        document.getElementById("login-left").style.display = "block";
        document.getElementById("login-rights").style.display = "none";
    }
    tab2 = () => {
        document.getElementById("tab-right").setAttribute("class", "tab-right-on");
        document.getElementById("tab-left").setAttribute("class", "tab-left");
        document.getElementById("login-left").style.display = "none";
        document.getElementById("login-right").style.display = "block";
        document.getElementById("login-rights").style.display = "none";
    }
    tab3 = () => {
        document.getElementById("login-right").style.display = "none";
        document.getElementById("login-rights").style.display = "block";  
        document.getElementById("login-left").style.display = "none";
    }
    tab4 = () => {
        document.getElementById("login-rights").style.display = "none";
        document.getElementById("login-right").style.display = "block"; 
        document.getElementById("login-left").style.display = "none"; 
    }
    login = () => {
        var username = document.getElementById("username").value;
	    var password = document.getElementById("password").value;
	    if(username == "" || password == ""){
		    alert("用户名或密码不能为空！")}
	    else{
		    alert("登录成功！")
	}
    }
    render(){
        
        return(
            <Fragment>
                <div className="tab-left-on" id="tab-left" onClick={this.tab1}>扫码登录</div>
                <div className="tab-right" id="tab-right" onClick={this.tab2} >账号密码登录</div>
                <div className="login-left" id="login-left">
                    <div className="login-left-one">扫码后点击“确认授权”，即可完成账号绑定及登录</div>
                    <div className="login-left-two">支持扫码登录的APP</div>
                    <div className="login-left-three">
                                <img src={imgURL2}></img><span>支付宝APP</span>
                                &nbsp;&nbsp;
                                <img src={imgURL3}></img><span>钉钉APP</span>
                    </div>
                    <div className="login-left-four"><img src={imgURL}></img></div>
                    <div className="login-left-five"><a href="#">免费注册</a></div>
                    <div className="login-bottom">
                        <div>其他登录方式</div>
                        <img src={imgURL1}></img>
                    </div>
                </div>
                <div className="login-rights" id="login-rights" style={{display: 'none'}}>
            <div className="login-rights-one">
                扫码登录
                <img src={bb} onClick={this.tab4}/>
            </div>
            <div className="login-rights-two">
                <img src={aa}/>
            </div>
            <div className="login-rights-three">
                <a href="#" className="login-right-five-link">下载阿里云APP</a>
                <a href="#" className="login-right-five-link">免费注册</a>
            </div>
            </div>



            <div className="login-right" id="login-right" style={{display: 'none'}}>
                <div className="login-right-one">
                    密码登录
                    <img src={saoma} onClick={this.tab3} />
                </div>
                <div className="login-right-two">
                    <input type="text" id="username" placeholder="邮箱/会员名/8位ID" />
                </div>
                <div className="login-right-three">
                    <input type="text" id="password" placeholder="请输入登录密码" />
                </div>
                <div className="login-right-four">
                    <button type="submit" onClick={this.login}>登录</button>
                </div>
                <div className="login-right-five">
                    <a href="#" className="login-right-five-link">忘记密码</a>
                    <a href="#" className="login-right-five-link">忘记会员名</a>
                    <a href="#" className="login-right-five-link">免费注册</a>
                </div>
            </div>
            </Fragment>
        )
    }
}

export default B1;